<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        display: flex;
        width: 800px;
        height: 410px;
        margin: 100px auto;
        align-items: center;
      }

      .icon {
        width: 600px;
        height: 410px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="wrap">
        <button @click="prev">上一页</button>
        <img
          class="icon"
          :src="imgs[index]"
          alt=""
        />
        <button @click="next">下一页</button>
      </div>
    </div>
    <script src="./vue.js"></script>

    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            index: 0,
            imgs: [
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/155/155-mobileskin-1.jpg',
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-mobileskin-1.jpg',
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-mobileskin-1.jpg',
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/149/149-mobileskin-1.jpg',
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/115/115-mobileskin-1.jpg'
            ]
          }
        },
        methods: {
          next () {
            // 让下标+1
            this.index++
            // 数组最大下标是：长度-1，也就是说不能到长度，到长度就代表越界
            if (this.index >= this.imgs.length) {
              this.index = 0
            }
          },
          prev () {
            // 让下标-1
            this.index--
            if (this.index < 0) {
              this.index = this.imgs.length - 1
            }
          }
        }
      })
    </script>
  </body>
</html>
